import React, { Component } from 'react';
import { connect } from "react-redux";
import { addTodoAction, deleteTodoAction } from "../../redux/actions/TodoList";
import "./index.scss";

class TodoList extends Component {
    addTodo = () => {
        // this.props.add()
        this.props.add({ id: Date.now(), text: this.formText.value })
    }
    deleteTodo = (id) => {
        this.props.delete({ id: id })

    }
    render() {
        const { todos } = this.props
        console.log(todos)
        return (
            <div className="todolist">
                <div className="list">
                    <h1>代办列表</h1>
                    <ul>
                        {
                            todos.map((todo, index) => {
                                return (
                                    <li key={index}>
                                        <div className="line">
                                            <span>
                                                {todo.text}
                                            </span>
                                        </div>
                                        <button onClick={this.deleteTodo.bind(this, todo.id)}>删除</button>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className="form">
                    <label>
                        <span>内容:</span>
                        <input ref={c => this.formText = c} />
                        <button onClick={this.addTodo}>添加</button>
                    </label>

                </div>


            </div>
        )
    }
}

export default connect(
    state => ({ todos: state }),    // 映射状态
    {
        add: addTodoAction,
        delete: deleteTodoAction
    }// 映射状态的方法
)(TodoList)
